<template>
  <el-popover
      v-model:visible="popoverVisible"
      placement="top"
      trigger="click"
      width="400"
  >
    <el-scrollbar height="200px">
      <div class="emoji-picker">
      <span
          v-for="emoji in emojis"
          :key="emoji"
          class="emoji"
          @click="handleEmojiClick(emoji)"
      >
        {{ emoji }}
      </span>
      </div>
    </el-scrollbar>
    <template #reference>
      <slot name="trigger"></slot>
    </template>
  </el-popover>
</template>

<script lang="ts" setup>
// 数据
defineOptions({
  name: "EmojiPicker",
  inheritAttrs: false,
});
const props = withDefaults(defineProps<{
  onEmojiClick: (emojis: string) => void    // 点击Emoji回调
}>(), {});

const popoverVisible = ref<boolean>(false);
const emojis = ref<string[]>(['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨',
  '🧐', '🤓', '😎', '🥳', '🤯', '😳', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '😴', '🤤', '😪', '😵', '🤐', '🥴',
  '🤠', '😈', '👿', '👹', '👺', '🤡', '👻', '💀', '☠️', '👽', '👾', '🤖', '🎃', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾',
  '👋', '🤚', '✋', '🖖', '👌', '🤏', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍', '👎', '✊', '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲',
  '🙏', '✍️', '💅', '🤳', '💪', '🦾', '🦵', '🦿', '🦶', '👂', '🦻', '👃', '🧠', '🦷', '🦴', '👀', '👁️', '👅', '👄',
  '👶', '🧒', '👦', '👧', '🧑', '👱‍♂️', '👱‍♀️', '👨', '👩', '🧔', '👨‍🦰', '👩‍🦰', '👨‍🦱', '👩‍🦱', '👨‍🦳', '👩‍🦳', '👨‍🦲', '👩‍🦲', '👳‍♂️', '👳‍♀️', '👲', '🧕', '🤵', '👰', '🤰', '🤱', '👩‍🍼', '👨‍🍼',
  '🧑‍🍼', '👼', '🎅', '🤶', '🧑‍🎄', '🦸‍♂️', '🦸‍♀️', '🦹‍♂️', '🦹‍♀️', '🧙‍♂️', '🧙‍♀️', '🧚‍♂️', '🧚‍♀️', '🧛‍♂️', '🧛‍♀️', '🧜‍♂️', '🧜‍♀️', '🧝‍♂️', '🧝‍♀️', '🧞‍♂️', '🧞‍♀️', '🧟‍♂️', '🧟‍♀️',
  '💆‍♂️', '💆‍♀️', '💇‍♂️', '💇‍♀️', '🚶‍♂️', '🚶‍♀️', '🏃‍♂️', '🏃‍♀️', '💃', '🕺', '🕴', '👯‍♂️', '👯‍♀️', '🧖‍♂️', '🧖‍♀️', '🧗‍♂️', '🧗‍♀️', '🤺', '🏇', '⛷', '🏂', '🏌️‍♂️', '🏌️‍♀️', '🏄‍♂️', '🏄‍♀️', '🚣‍♂️', '🚣‍♀️', '🏊‍♂️', '🏊‍♀️',
  '🤽‍♂️', '🤽‍♀️', '🤾‍♂️', '🤾‍♀️', '🧘‍♂️', '🧘‍♀️', '🛀', '🛌', '🧑‍🤝‍🧑', '👭', '👫', '👬', '💏', '👩‍❤️‍💋‍👨', '👨‍❤️‍💋‍👨', '👩‍❤️‍💋‍👩', '💑', '👩‍❤️‍👨', '👨‍❤️‍👨', '👩‍❤️‍👩', '👪', '👨‍👩‍👧', '👨‍👩‍👧‍👦', '👨‍👩‍👦‍👦', '👨‍👩‍👧‍👧',
  '👩‍👩‍👦', '👩‍👩‍👧', '👩‍👩‍👧‍👦', '👩‍👩‍👦‍👦', '👩‍👩‍👧‍👧', '👨‍👨‍👦', '👨‍👨‍👧', '👨‍👨‍👧‍👦', '👨‍👨‍👦‍👦', '👨‍👨‍👧‍👧', '👩‍👦', '👩‍👧', '👩‍👧‍👦', '👩‍👦‍👦', '👩‍👧‍👧', '👨‍👦', '👨‍👧', '👨‍👧‍👦', '👨‍👦‍👦', '👨‍👧‍👧',
  '👩‍🏫', '👨‍🏫', '👩‍🔬', '👨‍🔬', '👩‍⚕️', '👨‍⚕️', '👩‍🌾', '👨‍🌾', '👩‍🍳', '👨‍🍳', '👩‍🎓', '👨‍🎓', '👩‍🎤', '👨‍🎤', '👩‍🏭', '👨‍🏭', '👩‍💻', '👨‍💻', '👩‍💼', '👨‍💼', '👩‍🔧', '👨‍🔧', '👩‍🔧', '👨‍🔧', '👩‍🔧', '👨‍🔧', '👩‍🔧', '👨‍🔧', '👩‍🔧', '👨‍🔧', '👩‍🔧', '👨‍🔧'
]);

// 方法
function handleEmojiClick(emoji: string) {
  popoverVisible.value = false;
  props.onEmojiClick(emoji);
}

// 生命周期
</script>

<style lang="scss" scoped>
/* 样式 */
.emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px;
}

.emoji {
  cursor: pointer;
  font-size: 1.5rem;
}
</style>
